<template>
  <div class="pagination">
    <a-pagination
      :current="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      :show-total="total => `共${total}条，${Math.ceil(total / pageSize)}页`"
      @change="pageChange"
      @showSizeChange="pageChange"
    />
  </div>
</template>

<script>
import { Pagination } from 'ant-design-vue'
export default {
  components: {
    APagination: Pagination
  },
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 100
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      pageSizeOptions: ['10', '20', '50', '100']
    }
  },
  methods: {
    pageChange(current, size) {
      this.$emit('change', current, size)
    }
  }
}
</script>

<style scoped lang="less">
.pagination {
  background-color: #ffffff;
  text-align: right;
  margin: 20px 12px 20px 0;
}
</style>
